<template>
    <div class="daohang">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            style="width:100%"
            mode="horizontal"
        >
            <el-menu-item index="1"
                ><i class="iconfont icon-bilibili"></i
            ></el-menu-item>
            <el-submenu index="2">
                <template slot="title"
                    ><a @click="home" style="color: black">主页</a></template
                >
                <el-menu-item
                    index="2-1"
                    class="tu1"
                    style="width: 10px !important"
                    ><a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianshi"></use></svg
                        >动画</a
                    ></el-menu-item
                >

                <el-menu-item index="2-2" class="tu1"
                    ><a href="">
                        <svg
                            class="icon"
                            aria-hidden="true"
                            style="font-size: 30px; margin-left: 30px"
                        >
                            <use xlink:href="#icon-fanjutuijian"></use></svg
                        >番剧</a
                    ></el-menu-item
                >

                <el-menu-item index="2-3" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-guochandonghuatuijian"></use>
                    </svg>
                    国创
                </el-menu-item>
                <el-menu-item index="2-5" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-yinle"></use>
                    </svg>
                    音乐
                </el-menu-item>
                <el-menu-item index="2-6" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-19"></use></svg
                    >运动
                </el-menu-item>
                <el-menu-item index="2-7" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-yazi"></use></svg
                    >生活
                </el-menu-item>
                <el-menu-item index="2-8" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-guixu"></use></svg
                    >鬼畜
                </el-menu-item>
                <el-menu-item index="2-9" class="tu1">
                    <svg
                        class="icon"
                        aria-hidden="true"
                        style="font-size: 30px"
                    >
                        <use xlink:href="#icon-shishang"></use></svg
                    >时尚
                </el-menu-item>
            </el-submenu>
            <el-menu-item index="1"><a>番剧</a></el-menu-item>
            <el-menu-item index="4"><a>游戏中心</a></el-menu-item>
            <el-menu-item index="4"><a>直播</a></el-menu-item>       
            <el-menu-item index="4"><a>会员购</a></el-menu-item>
            <el-menu-item index="4">
                <!-- 搜索框 -->
                <div>
                    <el-input
                        placeholder="请输入内容"
                        v-model="input3"
                        class="input-with-select"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="search(input3)"
                        ></el-button>
                    </el-input>
                </div>
            </el-menu-item>

            <el-menu-item index="4"
                ><a>
                    <!-- 头像 -->
                    <el-col :span="12">
                        <div @click="Routehome" class="demo-basic--circle">
                            <div class="block">
                                <el-avatar
                                    :size="50"
                                    :src="circleUrl"
                                ></el-avatar>
                            </div>
                            <div
                                class="block"
                                v-for="size in sizeList"
                                :key="size"
                            >
                                <el-avatar
                                    :size="size"
                                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                                ></el-avatar>
                            </div>
                        </div>
                    </el-col> </a
            ></el-menu-item>

            <el-menu-item index="4"><a>会员</a></el-menu-item>
            <el-menu-item index="4"><a>历史</a></el-menu-item>
            <el-menu-item index="4"
                ><a @click="Routeupload">创作中心</a></el-menu-item
            >
            <el-menu-item index="4"
                ><a>
                    <el-dropdown>
                        <el-button type="primary" @click="Routeupload">
                            投稿<i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                ><a href=""
                                    ><i
                                        class="iconfont icon-tougao"
                                    />专栏投稿</a
                                ></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><a href=""
                                    ><i
                                        class="iconfont icon-tougao2"
                                    />音频投稿</a
                                ></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><a href=""
                                    ><i
                                        class="iconfont icon-shipin"
                                    />视频投稿</a
                                ></el-dropdown-item
                            >
                            <el-dropdown-item
                                ><a href=""
                                    ><i
                                        class="iconfont icon-tougao1"
                                    />投稿管理</a
                                ></el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </a></el-menu-item
            >
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: "1",
            activeIndex2: "1",
            // 搜索
            input3: "",
            //头像
            circleUrl: "",
            sizeList: [],
            list:{token:""}
        };
    },
    created() {
        this.query();
    },
    methods: {
        query() {
            let a = { token: window.sessionStorage.getItem("token") };
            //console.log(a);
            this.$api.__api_list_users_get(a).then((response) => {
                //console.log(response.length());
                if (response.length == 1) {
                    this.circleUrl =
                        process.env.VUE_APP_API_URL + response[0].header;
                } else {
                    this.circleUrl =
                        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
                }
            });
        },
        handleSelect(key, keyPath) {
            this.$router.push("/home").catch(() => {});
            //this.$router.push("/home");
        },

        home() {
            this.$router.push("/").catch(() => {});
        },
        Routehome() {
            if (this.list.token) {
                this.$router.push({
                    path: "/home",
                    query: { allData: encodeURIComponent(this.list.token) },
                });
            } else {
                this.$router.push({
                    path: "/home",
                });
            }
        },
        Routeupload() {
            this.$router.push("/submission/videoSubmission").catch(() => {});
        },

        search(label) {
            let objData = JSON.stringify(label);
            this.$router.push({
                path: "/",
                query: { allData: encodeURIComponent(objData) },
            });
            //console.log(objData);
        },
    },
};
</script>

<style>
.icon {
    width: 1em;
    height: 1em;

    vertical-align: -0.23em;
    fill: currentColor;
    overflow: hidden;
    font-size: 30px;
    margin-left: 30px;
}

.tu1 {
    margin-top: 20px;
}

.daohang {
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

/* 导航字体颜色 */
.el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 0px solid white;
    color: #303133 !important;
}

.el-menu-item {
    color: black !important;
}

.el-submenu__title {
    color: black !important;
}

/* 搜索框 */
.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.el-input__inner {
    height: 35px;
    width: 350px;
}

/* 投稿 */
.el-dropdown {
    vertical-align: top;
}

.el-dropdown + .el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.el-icon-arrow-down:before {
    content: "";
}

.el-button--primary {
    color: #fff;
    background-color: #fb7299;
    border-color: #fb7299;
}

.el-button {
    border-radius: 2px;
    margin-bottom: 13px;
    size: 20px;
}
</style>